<script lang="ts" setup>
import { OrderDetailsRoom } from '@/types/order';
import { useLocale } from '@/locale/locale';

withDefaults(
  defineProps<{
    items?: OrderDetailsRoom[];
  }>(),
  {
    items: () => []
  }
);

const { t } = useLocale();
</script>

<template>
  <apt-section :title="t('LHTKey_roomDetail')" custom-style="margin-bottom: 20rpx">
    <view
      v-for="(item, index) in items"
      :key="item.room_id"
      :class="{
        'is-first': index === 0,
        'is-last': index === items.length - 1
      }"
      class="flex order-details__rooms-item"
    >
      <image :src="item.cover" class="order-details__rooms-item-cover"></image>
      <view class="ml-2_5 flex-1 flex flex-col justify-between">
        <view class="text-base text-primary">
          {{ item.name }}
        </view>
        <view class="flex justify-between items-center">
          <view class="flex items-baseline">
            <text class="text-sm text-primary">¥</text>
            <text class="text-xl text-primary">{{ item.booking_fee }}</text>
          </view>
          <view class="text-lg text-primary">x{{ item.roomNum }}</view>
        </view>
      </view>
    </view>
  </apt-section>
</template>

<style>
.order-details__rooms-item {
  padding: 32rpx 0;
  border-top: 2rpx solid #f4f4f4;
}

.order-details__rooms-item.is-first {
  padding-top: 0;
  border-top: none;
}

.order-details__rooms-item.is-last {
  padding-bottom: 0;
}

.order-details__rooms-item-cover {
  width: 150rpx;
  height: 150rpx;
  border-radius: 12rpx;
}
</style>
